<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page,useVbenDrawer } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getAllApi } from '#/api/system/setting';
import AppThemeForm from './form/app_theme.vue';
import CustomerForm from './form/customer.vue';
import PayForm from './form/pay.vue';
import PointsForm from './form/points.vue';
import RechargeForm from './form/recharge.vue';
import RegisterForm from './form/register.vue';
import SmsForm from './form/sms.vue';
import StorageForm from './form/storage.vue';
import WxappForm from './form/wxapp.vue';

interface RowType {
  key: string;
  describe: string;
  update_time: string;
}

const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { field: 'key', title: 'key', minWidth:'auto' },
    { field: 'describe', title: '设置项', minWidth:'auto' },
    { field: 'update_time', title: '更新时间', minWidth:'auto' },
    { field: 'action', fixed: 'right', slots: { default: 'action' }, title: '操作', minWidth:'auto' },
  ],
  showOverflow: false,
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async () => {
        return await getAllApi();
      },
    },
    sort: true,
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: { code: 'query' },
    zoom: true,
  },
  rowConfig: {
    keyField: 'key',//主键的字段名
  },
  pagerConfig: {
    enabled: false,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

const [AppThemeFormDrawer, AppThemeFormDrawerApi] = useVbenDrawer({
  connectedComponent: AppThemeForm,
  onBeforeClose() {
    gridApi.query();
    return true;
  },
});
const [CustomerFormDrawer, CustomerFormDrawerApi] = useVbenDrawer({
  connectedComponent: CustomerForm,
  onBeforeClose() {
    gridApi.query();
    return true;
  },
});
const [PayFormDrawer, PayFormDrawerApi] = useVbenDrawer({
  connectedComponent: PayForm,
  onBeforeClose() {
    gridApi.query();
    return true;
  },
});
const [PointsFormDrawer, PointsFormDrawerApi] = useVbenDrawer({
  connectedComponent: PointsForm,
  onBeforeClose() {
    gridApi.query();
    return true;
  },
});
const [RechargeFormDrawer, RechargeFormDrawerApi] = useVbenDrawer({
  connectedComponent: RechargeForm,
  onBeforeClose() {
    gridApi.query();
    return true;
  },
});
const [RegisterFormDrawer, RegisterFormDrawerApi] = useVbenDrawer({
  connectedComponent: RegisterForm,
  onBeforeClose() {
    gridApi.query();
    return true;
  },
});
const [SmsFormDrawer, SmsFormDrawerApi] = useVbenDrawer({
  connectedComponent: SmsForm,
  onBeforeClose() {
    gridApi.query();
    return true;
  },
});
const [StorageFormDrawer, StorageFormDrawerApi] = useVbenDrawer({
  connectedComponent: StorageForm,
  onBeforeClose() {
    gridApi.query();
    return true;
  },
});
const [WxappFormDrawer, WxappFormDrawerApi] = useVbenDrawer({
  connectedComponent: WxappForm,
  onBeforeClose() {
    gridApi.query();
    return true;
  },
});
function openFormDrawer(key: string, describe: string) {
  getFormDrawerApi(key)?.setData({key,describe}).open();
    
}
function getFormDrawerApi(key: string){
  switch (key) {
    case 'app_theme':
        return AppThemeFormDrawerApi;
        break;
    case 'customer':
        return CustomerFormDrawerApi;
        break;
    case 'pay':
        return PayFormDrawerApi;
        break;
    case 'points':
        return PointsFormDrawerApi;
        break;
    case 'recharge':
        return RechargeFormDrawerApi;
        break;
    case 'register':
        return RegisterFormDrawerApi;
        break;
    case 'sms':
        return SmsFormDrawerApi;
        break;
    case 'storage':
        return StorageFormDrawerApi;
        break;
    case 'wxapp':
        return WxappFormDrawerApi;
        break;
  }
}
</script>

<template>
  <Page>
    <Grid table-title="系统设置">
      <template #action="{ row }">
        <Button type="link" class="px-2" @click="openFormDrawer(row.key,row.describe)"><IconifyIcon class="size-4 cursor-pointer outline-none" icon="ant-design:edit-outlined" /></Button>
      </template>
    </Grid>
    <AppThemeFormDrawer />
    <CustomerFormDrawer />
    <PayFormDrawer />
    <PointsFormDrawer />
    <RechargeFormDrawer />
    <RegisterFormDrawer />
    <SmsFormDrawer />
    <StorageFormDrawer />
    <WxappFormDrawer />
  </Page>
</template>
